---
title: オンデマンドレンダリングアダプター
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import RecipeLinks from '~/components/RecipeLinks.astro';
import IntegrationsNav from '~/components/IntegrationsNav.astro';

Astroでは、一部あるいはすべてのページとエンドポイントに**オンデマンドレンダリング**を選択できます。これは**サーバーサイドレンダリング（SSR）** とも呼ばれ、リクエスト時にサーバー上でHTMLページを生成し、結果をクライアントに送信します。プロジェクトをサーバー上で実行しリクエストを処理するためには、**アダプター**が使用されます。

このオンデマンドレンダリングを利用すると、次のようなことが可能になります。
- アプリのログイン状態のためにセッションを実装する。
- `fetch()`を使って動的にAPIを呼び出しデータをレンダリングする。
- *アダプター*を利用してサイトをホストにデプロイする。

以下が必要な場合は、Astroプロジェクトでオンデマンドレンダリングを有効にすることを検討してください。

- **APIエンドポイント**: クライアントから機密データを隠したまま、データベースへのアクセス、認証、認可などのタスクをおこなうAPIエンドポイントとして機能するページを作成する。

- **ページの保護**: サーバーでユーザーアクセスを制御し、ユーザーの権限に基づいてページへのアクセスを制限する。

- **頻繁に変更されるコンテンツ**: サイトを静的に再ビルドすることなく個々のページを生成する。これはページのコンテンツが頻繁に更新される場合に有効。

## 公式アダプター

Astroは、[Node.js](https://nodejs.org/)、[Vercel](https://vercel.com/)、[Netlify](https://www.netlify.com/)、[Cloudflare](https://www.cloudflare.com/)の公式アダプターを提供しています。

（Deno、SST、AWSなどの）[コミュニティ製のアダプター](https://astro.build/integrations/?search=&categories%5B%5D=adapters)を、インテグレーションディレクトリで確認してください。

<IntegrationsNav category="adapter"/>

## オンデマンドサーバーレンダリングを有効にする

Astroのオンデマンドレンダリングの出力モード（`server`と`hybrid`）はいずれも、可能な限り個々のルートを事前レンダリングすることで、静的サイトのパフォーマンスを活かせるようにします。このことは、完全に動的なアプリケーションであっても、特定のルートのみにオンデマンドレンダリングが必要なほぼ静的なサイトであっても同様です。

プロジェクトでどちらを使用するかを決定するには、ページとルートの**多く**がどのようにレンダリングされるかに応じて`output`オプションを選択します。

- __`output: 'server'`__: デフォルトでオンデマンドレンダリングされます。サイトやアプリの大部分またはすべてをリクエスト時にサーバーレンダリングする場合に使用します。個別のページやエンドポイントで、事前レンダリングに*オプトイン*できます。
- __`output: 'hybrid'`__: デフォルトでHTMLに事前レンダリングされます。サイトの大部分が静的である場合に使用します。個別のページやエンドポイントで、事前レンダリングを*オプトアウト*できます。

サーバーは少なくともいくつかのページをオンデマンドに生成する必要があるため、どちらのモードを選択しても、サーバー機能を実行するために[アダプターを追加](#アダプターの追加)する必要があります。

### アダプターの追加

プロジェクトを`server`または`hybrid`モードでデプロイするには、アダプターを追加する必要があります。これは、どちらのモードも、リクエスト時にページを生成するためにサーバーでコードを実行する環境である**ランタイム**が必要であるためです。各アダプターによってAstroは、VercelやNetlify、Cloudflareなどの特定のランタイムでプロジェクトを実行するためのスクリプトを出力できるようになります。

[公式版とコミュニティ版のアダプターを、インテグレーションディレクトリ](https://astro.build/integrations/?search=&categories%5B%5D=adapters)で確認できます。自分の[デプロイ環境](/ja/guides/deploy/)に対応するものを選択してください。

#### `astro add`を使ったインストール

[Astroが管理する公式のアダプター](/ja/guides/integrations-guide/#公式インテグレーション)は、次の`astro add`コマンドを使って追加できます。これにより、アダプターのインストールと、`astro.config.mjs`ファイルへの適切な変更が一度に実行されます。

たとえばVercelアダプターをインストールするには、以下のコマンドを実行します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>

#### 手動インストール

パッケージのインストールと`astro.config.mjs`の更新を手動でおこない、アダプターを追加することもできます。

たとえば、Vercelアダプターを手動で追加するには以下のようにします。

1. 好みのパッケージマネージャーを利用してプロジェクトの依存関係にアダプターをインストールします。

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/vercel
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/vercel
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/vercel
     ```
     </Fragment>
   </PackageManagerTabs>

2. `astro.config.mjs`ファイルのimportとdefault exportに[アダプターを追加し](/ja/reference/configuration-reference/#adapter)、必要な`output`モードを設定します。

    ```js ins={3,7} {6}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });
    ```

    アダプターごとに設定が異なることに注意してください。各アダプターのドキュメントを読み、選択したアダプターに必要な設定オプションを`astro.config.mjs`で適用してください。

### `server`と`hybrid`の設定

オンデマンドレンダリングを有効化するには、`output`の設定値を2つのサーバーレンダリングモードのいずれかに更新する必要があります。

たとえば、デフォルトですべてのページがオンデマンドにレンダリングされるような、大部分が動的なアプリケーションを設定するには、Astroの設定ファイルに`output: 'server'`を追加します。

```js ins={5} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import node from "@astrojs/node";

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});
```

### `server`モードで事前レンダリングにオプトインする

`output: server`を設定したほぼサーバーレンダリングされるアプリについては、`export const prerender = true`をページまたはルートに追加して、静的なページまたはエンドポイントを事前レンダリングできます。

```astro title="src/pages/mypage.astro" {2}
---
export const prerender = true;
// ...
---
<html>
  <!-- 事前レンダリングされた静的なページ... -->
</html>
```

```mdx title="src/pages/mypage.mdx" {5}
---
layout: '../layouts/markdown.astro'
title: 'My page'
---
export const prerender = true;

# 事前レンダリングされた静的なページです
```

```js title="src/pages/myendpoint.js" {1}
export const prerender = true;

export async function GET() {
  return new Response(
    JSON.stringify({
      message: `静的なエンドポイントです`,
    }),
  );
}
```

### `hybrid`モードで事前レンダリングをオプトアウトする

`output: hybrid`を設定したほぼ静的なサイトについては、オンデマンドにサーバーレンダリングしたいファイルに`export const prerender = false`を追加します。

```js title="src/pages/randomnumber.js" {1}
export const prerender = false;

export async function GET() {
  let number = Math.random();
  return new Response(
    JSON.stringify({
      number,
      message: `ランダムな数: ${number}`,
    }),
  );
}
```

## オンデマンドレンダリングの機能

### HTMLストリーミング

HTMLストリーミングにより、ドキュメントはチャンクへと分割され、ネットワークを経由して順に送信され、その順番でページにレンダリングされます。`server`または`hybrid`モードでは、Astroはコンポーネントをレンダリングする際にブラウザに送信するためにHTMLストリーミングを使用します。これによりユーザーにできるだけ早くHTMLを表示できますが、ネットワークの状況によっては、大きなドキュメントのダウンロードが遅れたり、データの取得を待つことでページのレンダリングがブロックされることがあります。

<RecipeLinks slugs={["ja/recipes/streaming-improve-page-performance"]}/>

:::caution
[レスポンスヘッダー](https://developer.mozilla.org/ja/docs/Glossary/Response_header)を変更する機能は**ページレベル**でのみ利用できます。（レイアウトコンポーネントを含むコンポーネントの内部では使用できません。）Astroがコンポーネントのコードを実行する時点で、すでにレスポンスヘッダーが送信されてしまっており、それを変更できないためです。
:::

### クッキー

`server`と`hybrid`モードでは、ページやAPIエンドポイントでクッキーをチェック、設定、取得、削除できます。

以下の例では、ページビューカウンターのクッキーの値を更新しています。

```astro title="src/pages/index.astro" {4,5,9}
---
let counter = 0

if (Astro.cookies.has("counter")) {
  const cookie = Astro.cookies.get("counter")
	counter = cookie.number() + 1
}

Astro.cookies.set("counter", counter)
---
<html>
  <h1>Counter = {counter}</h1>
</html>
```

[`Astro.cookies`と`AstroCookie`型](/ja/reference/api-reference/#astrocookies)の詳細については、APIリファレンスを参照してください。

### `Response`

オンデマンドレンダリングにより、ページから[Response](https://developer.mozilla.org/ja/docs/Web/API/Response)を返すこともできます。

以下の例では、データベースでidを検索した後、動的に404を返しています。

```astro title="src/pages/[id].astro" {8-11}
---
import { getProduct } from '../api';

const product = await getProduct(Astro.params.id);

// 商品（Product）が見つからなかった
if (!product) {
  return new Response(null, {
    status: 404,
    statusText: 'Not found'
  });
}
---
<html>
  <!-- ページの内容... -->
</html>
```

### `Request`

`Astro.request`は標準の[Request](https://developer.mozilla.org/ja/docs/Web/API/Request)オブジェクトです。リクエストの`url`、`headers`、`method`、さらには`body`を取得するなどのために使用できます。

`server`と`hybrid`モードの両方で、静的に生成されないページに関する追加の情報にこのオブジェクトからアクセスできます。

#### `Astro.request.headers`

リクエストのヘッダーには`Astro.request.headers`からアクセスできます。これはブラウザの[`Request.headers`](https://developer.mozilla.org/ja/docs/Web/API/Request/headers)と同様に動作します。これは[Headers](https://developer.mozilla.org/ja/docs/Web/API/Headers)オブジェクトで、クッキーなどのヘッダーを取得できます。

```astro title="src/pages/index.astro" {2}
---
const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- ページの内容... -->
</html>
```

#### `Astro.request.method`

リクエストで使用されているHTTPメソッドには`Astro.request.method`からアクセスできます。これはブラウザの[`Request.method`](https://developer.mozilla.org/ja/docs/Web/API/Request/method)と同様に動作します。リクエストで使用されているHTTPメソッドを文字列として返します。

```astro title="src/pages/index.astro"
---
console.log(Astro.request.method) // GET (ブラウザで遷移した際)
---
```

[`Astro.request`](/ja/reference/api-reference/#astrorequest)の詳細については、APIリファレンスを参照してください。

### サーバーエンドポイント

**APIルート**とも呼ばれるサーバーエンドポイントは、`src/pages`フォルダの中の`.js`または`.ts`ファイルからエクスポートされる特別な関数です。オンデマンドのサーバーサイドレンダリングにおける強力な機能であるAPIルートは、サーバーサイドで安全にコードを実行できます。

この関数は[エンドポイントコンテキスト](/ja/reference/api-reference/#endpoint-context)を受け取り、[Response](https://developer.mozilla.org/ja/docs/Web/API/Response)を返します。

詳しくは、[エンドポイントガイド](/ja/guides/endpoints/#サーバーエンドポイントapiルーティング)を参照してください。
